<template>
    <view class="wdh-100 columnbox content">
        <view class="rowbox wdh-100 spb one-info">
            <view class="info-title">门店照片</view>
            <view class="info-detail" @click="addImg">
                <view class="rowbox add-img" v-if="logo==''">
                    <u-icon name="plus"></u-icon>
                </view>
                <image :src="logo" v-else mode="aspectFill" class="rowbox add-img"></image>
            </view>
        </view>
        <view class="rowbox wdh-100 spb one-info">
            <view class="info-title">门店名称</view>
            <view class="info-detail">
                <input v-model="name" placeholder="请输入" />
            </view>
        </view>
        <view class="rowbox wdh-100 spb one-info" @click="chooseCity">
            <view class="info-title">门店地址</view>
            <!-- <view class="rowbox info-detail">
				<text>{{showcity||''}}</text>
				<u-icon name="arrow-right" size="28rpx"></u-icon>
			</view> -->
            <view class="info-detail">
                <input v-model="address" placeholder="请输入" />
            </view>
        </view>
        <view class="rowbox wdh-100 spb one-info">
            <view class="info-title">联系电话</view>
            <view class="info-detail">
                <input v-model="mdphone" placeholder="请输入" />
            </view>
        </view>
        <view class="rowbox wdh-100 spb one-info">
            <view class="info-title">店主名称</view>
            <view class="info-detail">
                <input v-model="nickname" placeholder="请输入" />
            </view>
        </view>
        <view class="rowbox wdh-100 spb one-info" style="border: none;">
            <view class="info-title">收款方式</view>
        </view>
        <!--    <view v-for="(item,index) in shoukuanList" :key='index' class="rowbox shoukuan-box spb"
            @click="curshoukuan=item.value">
            <view class="wallet-pay-title">{{item.title}}</view>
            <image v-if="curshoukuan==item.value" src="/static/img/sel.png" mode="widthFix" class="sel-icon">
            </image>
            <image v-else src="/static/img/unsel.png" mode="widthFix" class="sel-icon"></image>
        </view> -->

        <view @click="curshoukuan=item.value" class="rowbox spb one-type" v-for="(item,index) in shoukuanList"
            :key='index'>
            <view class="columnbox als">
                <view> {{item.title}}</view>
            </view>
            <image v-if="curshoukuan==item.value" class="tem-icon" src="/static/img/sel.png" mode="widthFix"></image>
            <image v-else class="tem-icon" src="/static/img/unsel.png" mode="widthFix"></image>
        </view>

        <view class="rowbox wdh-100">
            <view class="rowbox send-btn grey-btn" v-if="submitflag">创建店铺</view>
            <view class="rowbox send-btn def-bgcol" v-else @click="submitInfo">创建店铺</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                submitflag: false,
                name: "",
                mdphone: "",
                address: "",
                nickname: "",
                logo: "",
                shoukuanList: [{
                        title: '顾客到店支付',
                        value: 3
                    },
                    {
                        title: '平台代收款（1.5%手续费，T+1到账）',
                        value: 2
                    },
                    {
                        title: '在线支付（需要配置商户号）',
                        value: 1
                    }
                ],
                curshoukuan: 3
            };
        },
        onShow() {

        },
        onLoad() {},
        methods: {
            getUserInfo() {
                this.$req.post('/shanghu/userInfo', {
                    uid: uni.getStorageSync('uid')
                }).then(res => {

                    let data = res.data.data
                    uni.removeStorageSync('userInfo')
                    uni.setStorageSync('uid', res.data.data.id)
                    uni.setStorageSync('userInfo', data)
                    uni.navigateBack()
                })
            },
            addImg() {
                uni.chooseImage({
                    count: 1,
                    success: (res) => {
                        this.logo = res.tempFilePaths[0]
                    }
                })
            },
            submitInfo() {
                if (this.logo == '') {
                    uni.showToast({
                        title: '请上传门店照片',
                        icon: 'none'
                    })
                } else if (this.name == '') {
                    uni.showToast({
                        title: '请输入门店名称',
                        icon: 'none'
                    })
                } else if (this.address == '') {
                    uni.showToast({
                        title: '请输入门店地址',
                        icon: 'none'
                    })
                } else if (this.mdphone == '') {
                    uni.showToast({
                        title: '请输入联系电话',
                        icon: 'none'
                    })
                } else if (this.nickname == '') {
                    uni.showToast({
                        title: '请输入店主名称',
                        icon: 'none'
                    })
                } else {
                    if (!this.submitflag) {
                        this.submitflag = true
                        uni.showLoading({
                            title: '正在上传'
                        })
                        this.uploadLogo()
                    }
                }
            },
            uploadLogo() {
                this.$req.uploadImg(this.logo).then(res => {
                    this.$req.post('/shanghu/renzheng', {
                        "uid": uni.getStorageSync('uid'),
                        "name": this.name,
                        "mdphone": this.mdphone,
                        "address": this.address,
                        "nickname": this.nickname,
                        "logo": res.data.data,
                        "paystatus": parseInt(this.curshoukuan)
                    }).then(resp => {
                        uni.hideLoading()
                        this.submitflag = false
                        if (resp.data.code == 0) {

                            this.getUserInfo()
                            uni.showModal({
                                title: '您的店铺创建成功',
                                complete() {
                                    this.getUserInfo()
                                }
                            })
                        } else {
                            uni.showModal({
                                title: '创建失败',
                                content: resp.data.msg
                            })
                        }
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        padding: 20rpx 20rpx;
    }

    .img-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        border-bottom: #f5f5f5 solid 1px;
        padding-bottom: 32rpx;
    }

    .add-box,
    .img-box {
        background: #f5f5f5;
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
        margin-right: 32rpx;
        margin-top: 20rpx;
    }

    .img-box {
        position: relative;

        image {
            width: 150rpx;
            height: 150rpx;
            border-radius: 10rpx;
        }
    }

    .delet-box {
        position: absolute;
        right: -10rpx;
        background: rgba(#000, 0.7);
        width: 40rpx;
        height: 40rpx;
        border-radius: 40rpx;
        top: -10rpx;
    }

    .text-box {
        font-size: 28rpx;
        margin-top: 32rpx;
    }

    .one-info {
        padding: 32rpx 0;
        border-bottom: #f5f5f5 solid 1px;
        font-size: 28rpx;
    }

    .info-title {
        color: #202020;
    }

    .info-detail {
        text {
            margin-right: 10rpx;
        }

        input {
            font-size: 28rpx;
            text-align: right;
            width: 500rpx;
        }
    }

    .send-btn {
        margin-top: 100rpx;
        color: #fff;
        width: 600rpx;
        height: 100rpx;
        border-radius: 20rpx;
    }

    .market-title {
        text-align: center;
        padding: 32rpx 0;
        font-size: 32rpx;
    }

    .market-list {
        height: 50vh;
    }

    .one-market {
        padding: 32rpx 40rpx;
        font-size: 28rpx;
    }

    .market-name {
        width: 500rpx;
    }

    .sel-icon {
        width: 40rpx;
        height: 40rpx;
    }

    .confirm-btn {
        font-size: 28rpx;
        width: 500rpx;
        height: 90rpx;
        color: #fff;
        border-radius: 10rpx;
    }

    .market-choose {
        width: 450rpx;
        margin-right: 10rpx;
        text-align: right;
        // view {
        // 	margin-top: 10rpx;
        // 	margin-right: 10rpx;
        // }
    }

    .add-img {
        background: #f2f0f3;
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
    }

    .shoukuan-box {
        font-size: 26rpx;
        color: #202020;
        width: 100%;
        margin-bottom: 32rpx;
    }

    .sel-icon {
        width: 28rpx;
        height: 28rpx;
    }

    .one-type {
        width: 100%;
        padding: 20rpx 32rpx;
        border: #eeecef solid 1px;
        border-radius: 10rpx;
        font-size: 28rpx;
        margin-bottom: 20rpx;
    }

    .tem-icon {
        width: 28rpx;
        height: 28rpx;
    }

    .tem-btn {
        border-top: #f1eff0 solid 1px;
        padding: 20rpx 0;
        font-size: 28rpx;

        view {
            width: 40%;
            border-radius: 10rpx;
            margin: 0 20rpx;
        }
    }
</style>